<template>
  <div class="edit-div">
    <!--v-clickoutside自定义指令 -->
    <div ref="comment-form" class="comment-form mt-10" v-clickoutside="handleActiveClose">
      <div class="form-box">
        <!--文本域内容   v-html会将元素当成HTML标签解析后输出-->
        <div class="input-box">
          <div
            class="input-panel"
            ref="msgInputContainer"
            @keydown.enter.exact="sendMessage"
            @focus="handleFocus"
            @input="handleText"
            placeholder="输入评论..."
            contenteditable="true"
            spellcheck="false"
          ></div>
          <span class="count">
            <label :class="{ 'text-conte': textCount > 300 }">{{ textCount }}</label
            >/300
          </span>
        </div>
        <!--表情绑定事件 -->
        <div v-if="active" class="action-box">
          <div class="emoji-btn" v-clickoutside="handleEmojiClose">
            <div class="emoji-box" @click="handleEmojiClick">
              <div :style="emoJiStyles" class="lazy icon"></div>
              <span>表情</span>
            </div>
            <!--表情的下拉 -->
            <div v-if="showEmoji" class="emoji-selector">
              <!--三角形 -->
              <div class="triangle"></div>
              <!--content -->
              <div class="emoji-content">
                <div class="emoji-picker">
                  <ul class="category">
                    <li class="item" v-for="item in this.emojiList" :key="item.id">
                      <img
                        class="emoji"
                        :src="require(`@assets/emoji/${item.src}`)"
                        :alt="item.info"
                        @click="emojiConversion($event, item.src, item.info)"
                      />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="submit">
            <span>Ctrl or ⌘ + Enter</span>
            <button
              class="submit-btn"
              :disabled="
                textCount > 300 || textCount === 0 ? (disabled = true) : (disabled = false)
              "
            >
              评论
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isNull } from "@mixins/tools";
export default {
  name: "EditDiv",
  data() {
    return {
      active: false,
      showEmoji: false,
      innerText: "",
      textCount: 0,
      emojiList: [
        {
          id: "0",
          src: "1.png",
          info: "笑容满面"
        },
        {
          id: "1",
          src: "2.png",
          info: "笑容满面"
        },
        {
          id: "2",
          src: "3.png",
          info: "笑容满面"
        },
        {
          id: "3",
          src: "4.png",
          info: "笑容满面"
        },
        {
          id: "4",
          src: "5.png",
          info: "笑容满面"
        }
      ]
    };
  },
  computed: {
    emoJiStyles() {
      return {
        backgroundImage: "url('https://b-gold-cdn.xitu.io/v3/static/img/emoji.5594dbb.svg')"
      };
    }
  },
  methods: {
    handleFocus() {
      this.active = true;
    },
    handleActiveClose() {
      console.log("触发v-clickoutside指令");
      this.active = false;
    },
    handleEmojiClick() {
      this.showEmoji = true;
    },
    handleEmojiClose() {
      this.showEmoji = false;
    },
    sendMessage() {
      this.$Message.success("发送成功");
    },
    handleText(event) {
      let htmlContent = this.$refs.msgInputContainer.innerHTML; //操作dom
      let elements = document.getElementsByClassName("emoji-img");
      if (elements.length > 0) {
        let emoji = elements[0].outerHTML.length;
        this.innerText = htmlContent.length - emoji * elements.length + elements.length * 2;
      } else {
        this.innerText = htmlContent.length;
      }
      this.textCount = this.innerText;
    },
    emojiConversion(event, path, info) {
      // 表情输入
      const imgSrc = require(`@assets/emoji/${path}`);
      /**
       * 推荐使用document暴露的execCommand 方法来操作此处
       * 可以在当前焦点处插入元素
       * 感谢评论区掘友的建议
       */
      //const imgTag = `<img class='emoji-img' src="${imgSrc}" draggable="false" alt="${info}">`;
      //目前chrome75版本不支持，
      //document.execCommand("insertHTML", false, imgTag);
      //区别：比如说这样一个场景，用户输完了要输的东西，他如果想在他输入的内容中间加个表情，refs是做不到的
      //      document.execCommand 这个api支持在鼠标获取焦点的地方进行插入,refs只支持在末尾插入
      //this.$refs.msgInputContainer.innerHTML += imgTag;
      const imgTag = document.createElement("img");
      imgTag.className = "emoji-img";
      imgTag.src = imgSrc;
      imgTag.alt = info;
      imgTag.draggable = false;
      this.$refs.msgInputContainer.appendChild(imgTag); //appendChild只能插入dom的节点
      this.textCount += 2;
    }
  }
};
</script>
<style lang="stylus">
.emoji-img {
  vertical-align: sub // 垂直对齐文本的下标
  width: 16px
  height: 16px
  cursor: default
  margin: 0 1px
}
</style>
<style lang="stylus" scoped>
.edit-div {
  display: flex
  .comment-form {
    display: flex
    position: relative
    padding: 1rem 1.333rem
    background-color: #fafbfc
    border-radius: 3px
  }
  .form-box {
    flex: 1 1 auto
    width: 500px
    position: relative
  }
  .input-box .focused {
    border: 1px solid #007fff
  }
  .input-box {
    font-size: 0
    background-color: #fff
    border: 1px solid #f1f1f1
    border-radius: 3px
    position: relative
    .count {
      position: absolute
      color: #949494
      right: 10px
      font-size: 12px
      bottom: 0px
      user-select: none
      pointer-events: none
    }
    .text-conte {
      color: red
    }
  }
  .input-panel:empty::before {
    color: lightgrey
    content: attr(placeholder)
    pointer-events: none
    user-select: none
    // input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，
    // pointer-events: none; 只是用来禁用鼠标的事件
  }
  .input-panel {
    color: #17181a
    font-size: 14px
    padding: 10px 8px
    line-height: 20px
  }
  .action-box {
    display: flex
    align-items: center
    margin: 10px 0 0
    .submit {
      flex: 0 0 auto
      margin-left: auto
      span {
        color: #c2c2c2
        margin-right: 8px
        font-size: 13px
      }
      .submit-btn {
        flex: 0 0 auto
        margin-left: auto
        padding: 5px 13px
        font-size: 14px
        color: #fff
        border: none
        background-color: #027fff
        border-radius: 2px
        cursor: pointer
        &:disabled {
          cursor: default
          opacity: 0.4
        }
      }
    }
    .emoji-btn {
      position: relative
    }
    .emoji-box {
      display: flex
      color: #027fff
      cursor: pointer
      font-size: 12px
      span {
        padding: 1px
        font-size: 13px
      }
      .lazy {
        position: relative
      }
      .icon {
        width: 18px
        height: 18px
        background-repeat: no-repeat
        background-size: cover
      }
    }
  }
  .emoji-selector {
    position: absolute
    top: 30px
    bottom: 0
    z-index: 1
    padding: 10px
    width: 280px
    height: 120px
    border-radius: 2px
    background-color: #fff
    box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.16)
    .triangle {
      position: absolute
      top: -9px
      left: 15%
      width: 0
      height: 0
      transform: translate(-50%, -50%)
      border: 9px solid transparent
      border-bottom-color: #fff
    }
    .emoji-content {
      overflow: hidden
      .category {
        display: flex
        max-width: 270px
        max-height: 120px
        flex-wrap: wrap
        align-items: center
        justify-content: flex-start
      }
      .item {
        font-size: 14px
        padding: 5px
        cursor: pointer
      }
      .emoji {
        width: 22px
        height: 22px
        display: block
        &:hover {
          transform: scale(1.2)
          cursor: pointer
        }
      }
    }
  }
}
</style>
